<template>
  count:{{ count }}
  {{ $store_my.state.rCount }}
  <br />
  double:{{ double }}
  {{ $store_my.getters.rDouble }}
  <!-- 严格模式下直接修改state的值会报错 -->
  <!-- <button @click="$store_my.state.count++">vuex4严格模式下报错</button> -->
  <br />
  <!-- 同步修改 -->
  <button @click="add">同步修改</button>

  <!-- 异步修改 -->
  <button @click="asyncAdd">异步修改</button>
</template>

<script>
import { computed } from "vue";
import { useStore } from "@/vuex";
export default {
  name: "App",
  setup() {
    const store = useStore("my");

    const add = () => {
      store.commit("add", 1);
    };

    const asyncAdd = () => {
      store.dispatch("asyncAdd", 1);
    };

    return {
      // 不使用computed包裹，那么将不会具有响应式
      count: computed(() => store.state.rCount),
      double: computed(() => store.getters.rDouble),
      add,
      asyncAdd,
    };
  },
};
</script>

<style scoped></style>
